<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			<span id="span01">aaa</span>
			<span id="span02">aaa</span>

			用户名:<input name="username" />
			密码:<input name="password" />
			爱好:
			<input name="like" value="打球" type="checkbox">打球
			<input name="like" value="打游戏" type="checkbox">打游戏
			<input name="like" value="听音乐" type="checkbox">听音乐

			<div class="one">块1</div>
			<div class="two">块1</div>
			<div class="one">块1</div>
			<div class="two">块1</div>
		</div>

		<script>
			// 1. 通过id找元素
			// var span01 = document.getElementById("span01");
			span01.textContent = "你好";

			// 2. 通过标签找元素 返回的是一个数组
			var spans = document.getElementsByTagName("span");
			for (var i = 0; i < spans.length; i++) {
				spans[i].textContent = "哈哈" + i;
			}

			// 3. 通过name属性找元素
			var inputs = document.getElementsByName("like");
			for (var i = 0; i < inputs.length; i++) {
				inputs[i].checked = "checked";
			}

			// 4. 通过class属性找元素
			var divs = document.getElementsByClassName("two");
			for (var i = 0; i < divs.length; i++) {
				divs[i].style.backgroundColor = "red";
			}

			// 5. 通过css选择器查找元素
			// querySelect("css选择器")		返回的是符合选择器的第一个元素
			// querySelectAll("css选择器")  返回的是符合选择器的所有元素

			var divs = document.querySelectorAll(".one");
			console.log(divs.length);
			for (var i = 0; i < divs.length; i++) {
				divs[i].style.backgroundColor = "green";
			}
		</script>
	</body>
</html>
